<template>
  <div class="tabs">
    <!-- 切换按键区域 -->
    <div class="top">
      <div v-for="(item, index) in labelList"
           @click="activeIndex = index">
        <p :class="{active: activeIndex === index}">
          {{ item.name }}
          <span v-if="item.count || item.count === 0">
            ({{ item.count }})
          </span>
        </p>
      </div>
    </div>

    <!-- 展示区域 -->
    <component :is="labelList[activeIndex].value"
               :data="data"/>

    <!-- 提示区域 -->
    <good-detail-hit/>
  </div>
</template>

<script lang="ts"
        setup>
import GoodBottomDetail from '@/components/library/GoodBottomDetail.vue'
import GoodBottomTake from '@/components/library/GoodBottomTake.vue'
import GoodDetailHit from '@/components/library/GoodDetailHit.vue'
import type {GoodDetail} from '@/types/good'
import type {Tabs} from '@/types/tabs'
import {computed, inject} from 'vue'


let props = defineProps<{
  data: GoodDetail
}>()

let labelList = computed((): Tabs[] => {
  return [
    {name: '商品详情', value: GoodBottomDetail},
    {name: '商品评价', value: GoodBottomTake, count: props.data.commentCount}
  ]
})

let activeIndex = inject('tabActiveIndex')
</script>

<style lang="less"
       scoped>
.tabs {
  width: 940px;
  margin-right: 20px;

  .top {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #f5f5f5;

    div {
      width: 155px;
      height: 69px;
      padding: 0 40px;
      cursor: pointer;

      & ~ div {
        border-left: 1px solid #f5f5f5;
      }

      p {
        position: relative;
        flex: 1;
        font-size: 18px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 3px solid transparent;

        &.active {
          border-color: @xtxColor;
        }

        span {
          position: absolute;
          right: -25px;
          color: @priceColor;
        }
      }
    }
  }
}
</style>